<template>
    <div id="home">
            <NavBar class="home_nav"><div slot="center">购物街</div></NavBar>
            <!-- 要是有时间 可以在切换  这些类型里 添加切换动画-->
            <tab-control :titles="['流行','新款','精选']"  @tabClicks="tabClick"></tab-control>
        <Scroll class="content" ref='scroll' @scroll="contentScroll"
        @pullingUp="LoadMore">
        <!-- 轮播图组件 -->
            <HomeSwiper :banners="banners"></HomeSwiper>
            <!-- 推荐组件 -->
            <FeatureView :recommends="recommends"></FeatureView>
            <!-- 商品列表组件 -->
            <goods-list :goods="goodsData"></goods-list>
        </Scroll>
        <!-- 组件 直接监听点击事件 需要 native -->
        <back-top @click.native='backClick' v-show="isShowBackTop"></back-top>

    </div>
    <!-- -->
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import GoodsList from 'components/content/goods/GoodsList'
import Scroll from 'components/common/scroll/Scroll'
import BackTop from 'components/common/backtop/BackTop'

import HomeSwiper from './childComps/HomeSwiper'
import FeatureView from './childComps/FeatureView'

import { getHomeMultidata, getHomeGoods } from 'network/home'
import { debouce } from '../../commons/util'
import {MixIn} from 'commons/mixin'

export default {
    name:'home',
    components:{
        NavBar,
        HomeSwiper,
        FeatureView,
        TabControl,
        GoodsList,
        Scroll,
        BackTop
    },
    data(){
        return {
            banners:[],
            recommends:[],
            goods:{
                'pop':{page:0,list:[]},
                'new':{page:0,list:[]},
                'sell':{page:0,list:[]},
            },
            currentType:'pop',
            isShowBackTop:false
            //scroll
        }
    },
    created() {
        // 轮播图的数据请求
        this.getHomeMultidata()
        //根据参数 不一样 塞入不同的数据
        this.getHomeGoods('pop');
        this.getHomeGoods('new');
        this.getHomeGoods('sell');


    },
    // 使用混入
    mixins:[MixIn],
    // mounted(){
    //      const refresh = debouce(this.$refs.scroll.refresh,500);  //刷新，让滚动框架重新计算滚动区域
    //     //通过 vue原型链总线 去 监听一些事件
    //     // debugger
    //     this.$bus.$on('imgLoad',()=>{
    //         // 重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
    //     //
    //         console.log('进入了 imgLoad 的监听事件');
    //        //this.$refs.scroll.refresh();
    //        refresh();
    //     })
    // },
    methods:{
        /*
         *网络请求相关
        */
        getHomeMultidata(){
            getHomeMultidata().then(res =>{
                this.banners = res.data.banner.list;
                this.recommends = res.data.recommend.list;
               // console.log(res);
            })
        },
        getHomeGoods(type){
            const page = this.goods[type].page + 1;
            getHomeGoods(type,page).then(res=>{
                // console.log(res.data.list);
                 this.goods[type].list.push(...res.data.list)
                 this.goods[type].page +=1
                // 告诉页面 我已经刷新数据成功了！
                //console.log(this.goods[type].page);
                //console.log(this.goods[type].list);
                this.$refs.scroll.finishPullUp();
            })
        },
        // 下拉请求数据
        LoadMore(){
            this.getHomeGoods(this.currentType)
        },
        /**
         * 事件监听相关
         *
        */
        tabClick(index){
            console.log(index);
            switch(index){
                case 0:
                    this.currentType='pop';
                    break;
                case 1:
                    this.currentType='new';
                    break;
                case 2:
                    this.currentType='sell';
                    break;

            }
            console.log('执行回到顶部');
            this.backClick();
        },
        // 回到顶部 事件
        backClick(){
             //console.log('事件触发了');
            this.$refs.scroll.scrollTo();
           // console.log(this.$refs.scroll.scrollTo);

        },
        // 监听滑动的位置
        contentScroll(poison){
            this.isShowBackTop =(-poison.y)>800
        },

    },
    computed: {
        goodsData(){
           return  this.goods[this.currentType].list;
        }
    }

}

</script>
<style scoped>
.home_nav{
    background-color: pink;
}
.home_nav .center{
    color:#fff;
    font-size: 16px;
}
  #home {
    height: 100vh;
    position: relative;
  }

  .home-nav {
    background-color: var(--color-tint);
    color: #fff;
    position: relative;
    z-index: 9;
  }

  .tab-control {
    position: relative;
    z-index: 9;
  }

  .content {
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }
  .tab-control{
      position: sticky;
      top:0px;
  }
/* .content{
    position: absolute;
} */
  /* 这样也是可以的 */
 /* .content{
    height: calc(100% - 99px);
    overflow: hidden;
 } */

</style>